<template>
    <div class="continer">
        <div class="topbox">
            <el-button type="primary" icon="el-icon-plus" @click="btnAdd">添加机构</el-button>
            <el-button icon="el-icon-refresh" @click="getList">刷新列表</el-button>
        </div>
        <el-table :data="listData" row-key="id" style="width:100%" default-expand-all stripe border>
            <el-table-column label="机构名称" prop="name"></el-table-column>
            <el-table-column label="归属区域" prop="regionName"></el-table-column>
            <el-table-column label="机构编码" prop="number"></el-table-column>
            <el-table-column label="机构类型" prop="type">
                <template slot-scope="scope">{{types[scope.row.type]}}</template>
            </el-table-column>
            <el-table-column label="备注" prop="note"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="detail(scope.$index, scope.row)">查看</el-button>
                    <el-button type="text" size="mini" @click="edit(scope.$index, scope.row)">修改</el-button>
                    <el-button type="text" size="mini" @click="del(scope.$index, scope.row)">删除</el-button>
                    <el-button
                        type="text"
                        size="mini"
                        @click="subAdd(scope.$index, scope.row)"
                    >添加下属机构</el-button>
                </template>
            </el-table-column>
        </el-table>
        <iform
            :formData="formData"
            :show="showForm"
            :formType="formType"
            @closeForm="closeForm"
            @addSubmit="addSubmit"
            @subAddSubmit="addSubmit"
            @editSubmit="editSubmit"
        />
    </div>
</template>

<script>
import * as apis from "../../api/system/institutiion";
import iform from "./institutionForm";

export default {
    name: "instiutioin",
    data() {
        return {
            // 列表
            listData: [],
            tableOpen: [],
            // 显示表单
            showForm: false,
            // 表单数据
            formData: {},
            // 类型 1：查看，2：修改，3：添加下级，4：添加
            formType: 4,
            // 机构类型
            types: {}
        };
    },
    methods: {
        // 获取列表
        getList() {
            apis.getList()
                .then(data => {
                    let list = data.data.list;
                    this.listData = list;
                })
                .catch(() => {
                    this.$message({ type: "error", message: "获取数据失败!" });
                });
        },
        // 点击添加机构
        btnAdd() {
            this.formData = {};
            this.showForm = true;
            this.formType = 4;
        },
        // 获取树
        getTree() {
            apis.getTree()
                .then(data => {
                    if (data.code) {
                        return;
                    }
                    let list = data.data.list;
                    this.tableOpen = [];
                    for (let i in list) {
                        this.tableOpen.push(list[i].id);
                    }
                })
                .catch(() => {});
        },
        // 提交添加
        addSubmit(obj) {
            apis.add(obj)
                .then(data => {
                    if (data.code) {
                        this.$message({
                            type: "error",
                            message: data.message
                        });
                        return;
                    }
                    this.$message({
                        type: "success",
                        message: "添加成功"
                    });
                    this.getList();
                })
                .catch(() => {
                    this.$message({
                        type: "error",
                        message: "添加失败"
                    });
                });
        },
        // 点击查看
        detail(index, row) {
            this.formData = row;
            this.showForm = true;
            this.formType = 1;
        },
        // 点击修改
        edit(index, row) {
            this.formData = row;
            this.showForm = true;
            this.formType = 2;
        },
        // 提交修改
        editSubmit(obj) {
            apis.edit(obj)
                .then(data => {
                    if (data.code) {
                        this.$message({
                            type: "error",
                            message: data.message
                        });
                        return;
                    }
                    this.$message({
                        type: "success",
                        message: "修改成功"
                    });
                    this.getList();
                })
                .catch(() => {
                    this.$message({
                        type: "error",
                        message: "修改失败"
                    });
                });
        },
        // 点击添加下属机构
        subAdd(index, row) {
            this.formData = { pid: row.id };
            this.showForm = true;
            this.formType = 3;
        },
        // 删除
        del(index, row) {
            this.$confirm("确定删除该机构吗", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    apis.del({ id: row.id })
                        .then(data => {
                            if (data.code) {
                                this.$message({
                                    type: "error",
                                    message: data.message
                                });
                                return;
                            }
                            this.$message({
                                type: "success",
                                message: "删除成功!"
                            });
                            this.getList();
                        })
                        .catch(() => {
                            this.$message({
                                type: "error",
                                message: "删除失败!"
                            });
                        });
                })
                .catch(() => {});
        },
        // 关闭form
        closeForm() {
            this.showForm = false;
        },
        // 获取机构类型
        getType() {
            apis.getType().then(data => {
                if (data.code) {
                    return;
                }
                let list = data.data;
                this.types = list;
            });
        }
    },
    created() {
        this.getList();
        this.getType();
        this.getTree();
    },
    components: { iform }
};
</script>

<style scoped>
.txt_r {
    text-align: right;
}
.topbox {
    margin-bottom: 20px;
}
</style>
